import {useNavigate} from 'react-router-dom'
import {Layout} from '@/components/Layout'
import {useUserActions, useUserInfo} from '@/store/userStore.ts'
import {
    AlertDialog,
    AlertDialogAction,
    AlertDialogCancel,
    AlertDialogContent,
    AlertDialogFooter,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

import {Lock, LogOut, ChevronRight, User} from 'lucide-react'
import {ROUTE_PATHS} from "@/routs/routes.ts";

export const ProfilePage = () => {
    const navigate = useNavigate()
    const user = useUserInfo();
    const {clearUserInfoAndToken} = useUserActions();


    const handleLogout = () => {
        clearUserInfoAndToken();
        navigate(ROUTE_PATHS.LOGIN, {replace: true})
    }


    return (
        <Layout>
            <div className="p-4 space-y-4">
                {/* 用户信息卡片 */}
                <div className="bg-white rounded-lg p-6">
                    <div className="flex items-center space-x-4">
                        <div className="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center">
                            <User size={32} className="text-gray-500"/>
                        </div>
                        <div className="flex-1">
                            <h2 className="text-xl font-semibold text-gray-900">{user?.phone_number}</h2>
                            <p className="text-gray-600 mt-1"></p>
                        </div>
                    </div>
                </div>


                {/* 功能菜单 */}
                <div className="bg-white rounded-lg overflow-hidden">

                    <button
                        className="w-full flex items-center justify-between p-4 hover:bg-gray-50 transition-colors"
                        onClick={() => navigate(ROUTE_PATHS.EDIT_PWD)}>
                        <div className="flex items-center space-x-3">
                            <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                                <Lock size={16} className="text-blue-600"/>
                            </div>
                            <span className="text-gray-900">修改密码</span>
                        </div>
                        <ChevronRight size={20} className="text-gray-400"/>
                    </button>
                </div>

                {/* 退出登录 */}
                <div className="bg-white rounded-lg">
                    <AlertDialog>
                        <AlertDialogTrigger asChild>
                            <button

                                className="w-full flex items-center justify-center p-4 text-red-600 hover:bg-red-50 transition-colors"
                            >
                                <LogOut size={20} className="mr-2"/>
                                退出登录
                            </button>
                        </AlertDialogTrigger>

                        <AlertDialogContent>
                            <AlertDialogHeader>
                                <AlertDialogTitle>确认要退出登录吗?</AlertDialogTitle>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                                <AlertDialogCancel>取消</AlertDialogCancel>
                                <AlertDialogAction onClick={handleLogout}>确认</AlertDialogAction>
                            </AlertDialogFooter>
                        </AlertDialogContent>
                    </AlertDialog>
                </div>


                {/* 版本信息 */}
                <div className="text-center text-xs text-gray-400 mt-8">
                    <p>港中大智慧班车司机端</p>
                    <p>版本 1.0.0</p>
                </div>
            </div>
        </Layout>
    )
}

